import React, {useCallback, useEffect, useState} from 'react';
import { useNavigate } from 'react-router-dom';
import styles from '../../css/Commonuser_AccountManagement.module.css'; // 引入CSS模块
import {message} from 'antd';


const MainPage = () => {
    const [users, setUsers] = useState([]);
    const [currentUser, setCurrentUser] = useState({});
    const [errorMessage, setErrorMessage] = useState({} ); // 错误信息

    const [activeTab, setActiveTab] = useState('账号信息'); // 新增状态管理当前选中的标签
    console.log(activeTab);

    const [isEditingNickname, setIsEditingNickname] = useState(false);
    const [isEditingAge, setIsEditingAge] = useState(false);
    const [isEditingSignature, setIsEditingSignature] = useState(false); // 新增签名编辑状态
    const [nickname, setNickname] = useState('');
    const [age, setAge] = useState('');
    const [signature, setSignature] = useState(''); // 新增签名状态

    const [isEditingUsername, setIsEditingUsername] = useState(false);
    const [newUsername, setNewUsername] = useState('');

    const [isEditingPassword, setIsEditingPassword] = useState(false);
    const [oldPassword, setOldPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');

    const [isEditingPhoneNumber, setIsEditingPhoneNumber] = useState(false); // 新增手机号模态框状态
    const [newPhoneNumber, setNewPhoneNumber] = useState(''); // 新增状态
    const [verificationCode, setVerificationCode] = useState(''); // 验证码
    const [cooldown, setCooldown] = useState(0); // 新增发送验证码按钮冷却时间状态

    const [isLogoutModalVisible, setIsLogoutModalVisible] = useState(false); // 新增注销模态框状态
    const [logoutPassword, setLogoutPassword] = useState(''); // 新增注销密码状态

    const navigate = useNavigate();

    useEffect(() => {
        const user = JSON.parse(localStorage.getItem('currentUser'));
        if (user) {
            setCurrentUser(user);
            setNickname(user.nickname);
            setAge(user.age);
            setSignature(user.signature || '');
            console.log('Loaded User:', user);
            console.log('Loaded currentUser:', currentUser);
        } else {
            navigate('/');
        }
    }, [navigate]);

    // 权限检查函数
    const checkPermission = (permission) => {
        if (!currentUser.permissions || !currentUser.permissions.includes(permission)) {
            const messageText = `您没有${permission}权限`;
            console.error(messageText);
            message.error(messageText);
            return false;
        }
        return true;
    };

    // 修改昵称的三个函数
    const handleNicknameEditClick = () => {
        if (checkPermission('修改昵称')) {
            setIsEditingNickname(true);
        }
    };

    const handleNicknameChange = (e) => {
        setNickname(e.target.value);
    };

    const handleSaveClick = async () => {
        try {
            if (!nickname) {
                console.error('昵称不能为空');
                message.error('昵称不能为空');
                return false;
            }
            // 检查昵称是否发生了变化
            if (currentUser.nickname === nickname) {
                console.log('昵称未发生变化');
                setIsEditingNickname(false);
                message.info('昵称未发生变化');
                return;
            }

            // 保存到后端
            const response = await fetch(`http://localhost:8080/api/users/${currentUser.userId}/nickname`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ nickname }),
            });
            const data = await response.json();

            if (data.code === 200) {
                message.success('昵称修改成功');

                // 更新本地存储
                const updatedUser = { ...currentUser, nickname };
                localStorage.setItem('currentUser', JSON.stringify(updatedUser));
                setCurrentUser(updatedUser);
                console.log('用户ID:', currentUser.userId);
            } else {
                message.error(data.message || '昵称修改失败');
            }
            setIsEditingNickname(false);
        } catch (error) {
            console.error('更新昵称失败：', error);
            message.error('网络请求失败');
        }
    };

    // 修改性别的两个函数
    const handleGenderChange = (gender) => {
        if (!currentUser) {
            console.error('当前用户未加载');
            return;
        }
        const updatedUser = { ...currentUser, gender };
        console.log('Updated User:', updatedUser);
        setCurrentUser(updatedUser);
        localStorage.setItem('currentUser', JSON.stringify(updatedUser));
        saveGenderToBackend(updatedUser);
    };

    const saveGenderToBackend = async (updatedUser) => {
        try {
            const response = await fetch(`http://localhost:8080/api/users/${updatedUser.userId}/gender`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    gender: updatedUser.gender
                })
            });
            const data = await response.json();

            if (data.code === 200) {
                console.log('更新性别成功');
                message.success('性别修改成功');
            } else {
                console.error('更新性别失败：', data.message);
                message.error(data.message || '更新性别失败');
            }
        } catch (error) {
            console.error('网络请求失败：', error);
            message.error('网络请求失败');
        }
    };

    // 修改年龄的三个函数
    const handleAgeEditClick = () => {
        if (checkPermission('修改年龄')) {
            setIsEditingAge(true);
        }
    };

    const handleAgeChange = (e) => {
        setAge(e.target.value);
    };

    const handleSaveAgeClick = async () => {
        try {
            // 检查年龄是否发生了变化
            if (currentUser.age === age) {
                console.log('年龄未发生变化');
                setIsEditingAge(false);
                message.info('年龄未发生变化');
                return;
            }

            // 更新本地存储
            const updatedUser = { ...currentUser, age };
            localStorage.setItem('currentUser', JSON.stringify(updatedUser));
            setCurrentUser(updatedUser);
            console.log('用户ID:', currentUser.userId);

            // 保存到后端
            const response = await fetch(`http://localhost:8080/api/users/${currentUser.userId}/age`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ age }),
            });
            const data = await response.json();

            if (data.code === 200) {
                setIsEditingAge(false);
                message.success('年龄修改成功');
            } else {
                console.error('年龄修改失败：', data.message);
                message.error(data.message || '年龄修改失败');
            }
        } catch (error) {
            console.error('网络请求失败：', error);
            message.error('网络请求失败');
        }
    };

    // 修改签名的三个函数
    const handleSignatureEditClick = () => {
        if (checkPermission('修改签名')) {
            setIsEditingSignature(true);
        }
    };

    const handleSignatureChange = (e) => {
        setSignature(e.target.value);
    };

    const handleSaveSignatureClick = async () => {
        try {
            // 检查签名是否发生了变化
            if (currentUser.signature === signature) {
                console.log('签名未发生变化');
                setIsEditingSignature(false);
                message.info('签名未发生变化');
                return;
            }

            // 更新本地存储
            const updatedUser = { ...currentUser, signature };
            localStorage.setItem('currentUser', JSON.stringify(updatedUser));
            setCurrentUser(updatedUser);
            console.log('用户ID:', currentUser.userId);

            // 保存到后端
            const response = await fetch(`http://localhost:8080/api/users/${currentUser.userId}/signature`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ signature }),
            });
            const data = await response.json();

            if (data.code === 200) {
                console.log('更新签名成功');
                message.success('签名修改成功');
                setIsEditingSignature(false); // 退出编辑模式
            } else {
                console.error('签名修改失败：', data.message);
                message.error(data.message || '签名修改失败');
            }
        } catch (error) {
            console.error('网络请求失败：', error);
            message.error('网络请求失败');
        }
    };

    const handleOpenUsernameModal = () => {
        setIsEditingUsername(true);
        setNewUsername(currentUser.userName);
    };

    const handleCloseUsernameModal = () => {
        setIsEditingUsername(false);
        setNewUsername('');
    };

    const handleSaveUsername = async () => {
        try {
            // 检查用户名是否发生了变化
            if (currentUser.userName === newUsername) {
                console.log('用户名未发生变化');
                setIsEditingUsername(false);
                message.info('用户名未发生变化');
                return;
            }

            // 更新本地存储
            const updatedUser = { ...currentUser, userName: newUsername };
            localStorage.setItem('currentUser', JSON.stringify(updatedUser));
            setCurrentUser(updatedUser);
            console.log('用户ID:', currentUser.userId);

            // 保存到后端
            const response = await fetch(`http://localhost:8080/api/users/${currentUser.userId}/username`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ username: newUsername }),
            });

            if (response.ok) {
                console.log('更新用户名成功');
                setIsEditingUsername(false);
                message.success('用户名修改成功');
            } else {
                message.error('用户名修改失败');
            }
        } catch (error) {
            console.error('更新用户名失败：', error);
            message.error('网络请求失败');
        }
    };

    // 修改密码的三个函数
    const handleOpenPasswordModal = () => {
        setIsEditingPassword(true);
    };

    const handleClosePasswordModal = () => {
        setIsEditingPassword(false);
        setOldPassword('');
        setNewPassword('');
    };

    const handleSavePassword = async () => {
        try {
            // 验证原密码
            const response = await fetch(`http://localhost:8080/api/users/validate-password`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    userId: currentUser.userId,
                    oldPassword: oldPassword,
                }),
            });

            if (response.ok) {
                // 原密码验证成功，更新新密码
                const updateResponse = await fetch(`http://localhost:8080/api/users/${currentUser.userId}/password`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ newPassword: newPassword }),
                });

                if (updateResponse.ok) {
                    console.log('更新密码成功');
                    setIsEditingPassword(false);
                    message.success('密码修改成功');
                } else {
                    message.error('更新密码失败');
                }
            } else {
                message.error('原密码错误');
            }
        } catch (error) {
            console.error('更新密码失败：', error);
            message.error('网络请求失败');
        }
    };

    // 修改手机号的函数
    const handleSendVerificationCode = useCallback(async () => {
        if (cooldown > 0) return;

        // 检查手机号码是否为空
        if (!newPhoneNumber) {
            message.error('请输入手机号码');
            return;
        }

        // 验证手机号码
        if (!validatePhoneNumber(newPhoneNumber)) {
            message.error('请输入有效的手机号码');
            return;
        }

        try {
            const response = await fetch('http://localhost:8080/api/users/verificationcode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ phoneNumber: newPhoneNumber })
            });

            const responseBody = await response.json();


            if (responseBody.code !== 200) {
                message.error(responseBody.message || '发送验证码失败');
                return;
            }

            message.success('验证码已发送，请查收短信');

            // 设置冷却时间为30秒
            setCooldown(30);
            let timer = setInterval(() => {
                setCooldown(prevCooldown => prevCooldown - 1);
            }, 1000);

            // 清除定时器
            setTimeout(() => {
                clearInterval(timer);
            }, 30000);
        } catch (error) {
            console.error('发送验证码失败：', error);
            message.error('发送验证码时发生错误');
        }
    }, [newPhoneNumber, cooldown, setCooldown]);

    // 手机号码验证函数
    const validatePhoneNumber = (phoneNumber) => {
        const phoneRegex = /^1[3-9]\d{9}$/;
        return phoneRegex.test(phoneNumber);
    };
    const handleChangePhoneNumber = () => setIsEditingPhoneNumber(true);
    const handleClosePhoneNumberModal = () => setIsEditingPhoneNumber(false);
    const handleSavePhoneNumber = useCallback(async () => {
        // 验证新手机号是否为空
        if (!newPhoneNumber) {
            message.error('请输入新的手机号码');
            return;
        }

        // 验证新手机号是否有效
        if (!validatePhoneNumber(newPhoneNumber)) {
            message.error('请输入有效的手机号码');
            return;
        }

        // 验证验证码是否为空
        if (!verificationCode) {
            message.error('请输入验证码');
            return;
        }

        try {
            // 检查手机号码是否发生了变化
            if (currentUser.phone === newPhoneNumber) {
                console.log('手机号码未发生变化');
                setIsEditingPhoneNumber(false);
                message.info('手机号码未发生变化');
                return;
            }

            const response = await fetch('http://localhost:8080/api/users/phonenumber', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    userId: currentUser.userId,
                    phoneNumber: newPhoneNumber,
                    verificationCode: verificationCode
                })
            });

            const responseBody = await response.json();

            // 检查自定义响应状态码和消息
            if (responseBody.code !== 200) {
                message.error(responseBody.message || '手机号码更新失败');
                return;
            }

            // 更新本地存储
            const updatedUser = { ...currentUser, phone: newPhoneNumber };
            localStorage.setItem('currentUser', JSON.stringify(updatedUser));
            setCurrentUser(updatedUser);

            message.success(responseBody.message);
            setIsEditingPhoneNumber(false);
        } catch (error) {
            console.error('更新手机号码失败：', error);
            message.error('更新手机号码时发生错误');
        }
    }, [newPhoneNumber, verificationCode, currentUser, setIsEditingPhoneNumber, setCurrentUser]);


    //注销账号的函数
    const handleLogout = () => {
        setIsLogoutModalVisible(true);
    };

    const handleLogoutPasswordChange = (e) => {
        setLogoutPassword(e.target.value);
    };

    const handleConfirmLogout = async () => {
        try {
            // 验证密码
            const response = await fetch(`http://localhost:8080/api/users/validate-password`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    userId: currentUser.userId,
                    oldPassword: logoutPassword,
                }),
            });

            const validateResult = await response.json();

            // 检查自定义响应状态码和消息
            if (validateResult.code !== 200) {
                message.error(validateResult.message || '原密码验证失败');
                return;
            }

            // 密码验证成功，发送注销请求
            const logoutResponse = await fetch(`http://localhost:8080/api/users/${currentUser.userId}/logout`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ password: logoutPassword }),
            });

            const logoutResult = await logoutResponse.json();

            // 检查自定义响应状态码和消息
            if (logoutResult.code !== 200) {
                message.error(logoutResult.message || '注销失败');
                return;
            }

            console.log('注销成功');
            localStorage.removeItem('currentUser'); // 清除本地存储的用户信息
            navigate('/'); // 重定向到首页

        } catch (error) {
            console.error('注销失败：', error);
            message.error('网络请求失败');
        } finally {
            setIsLogoutModalVisible(false);
        }
    };

    const handleCloseLogoutModal = () => {
        setIsLogoutModalVisible(false);
    };

    return (
        <div className={styles.container}>
            <h2 style={{margin: '0'}}>我的账号</h2>
            <div className={styles.menu}>
                <div
                    className={`${styles.menuItem} ${activeTab === '账号信息' ? styles.active : ''}`}
                    onClick={() => setActiveTab('账号信息')}
                >
                    账号信息
                </div>
                <div
                    className={`${styles.menuItem} ${activeTab === '账号设置' ? styles.active : ''}`}
                    onClick={() => setActiveTab('账号设置')}
                >
                    账号设置
                </div>
                <button className={styles.returnButton} onClick={() => navigate('/')}>退出登录</button>
            </div>

            {/* 内容部分 */}
            {activeTab === '账号信息' ? (
                // 账号信息部分
                <div className={styles.userInfoContainer}>
                    <div className={styles.userBasicInfoContainer}>
                        <img
                            src={currentUser.userAvatar || 'http://localhost:8080/avatar/avatar_default.png'}
                            alt="用户头像"
                            className={styles.basicInfo_avatar}
                        />
                        <div className={styles.userBasicInfoContainer_center}>
                            <div style={{display: 'flex', justifyContent: 'flex-start', alignItems: 'center'}}>
                                <span className={styles.BasicInfo_userName}>{currentUser.userName}</span>
                                <span
                                    className={styles.BasicInfo_level}>lv.{Math.floor(currentUser.experiencePoints / 100) + 1}</span>
                            </div>
                            <span className={styles.BasicInfo_userId}><strong>uid:</strong> {currentUser.userId}</span>
                        </div>
                        <div className={styles.userBasicInfoContainer_right}>
                            <div className={styles.BasicInfo_userRole}>
                                {currentUser.roles && currentUser.roles.includes('admin') ? '管理员' : '普通用户'}
                            </div>
                            <div className={styles.BasicInfo_userPoints}><strong>积分:</strong> {currentUser.userPoints}
                            </div>
                        </div>
                    </div>

                    {/* 资料信息部分 */}
                    <div className={styles.userProfileInfoContainer}>
                        <div className={styles.userNickname_div}>
                            <strong>昵称:</strong>
                            {/* 在昵称显示和编辑输入之间切换 */}
                            <span className={styles.ProfileInfo_userNickname}>
                                {isEditingNickname ?
                                    (<input type="text" value={nickname} onChange={handleNicknameChange}
                                            className={styles.editInput}/>) :
                                    (<span style={{marginLeft: '5px'}}> {currentUser.nickname}</span>)
                                }
                            </span>
                            <img src="http://localhost:8080/icon/edit_icon.png" alt="编辑" className={styles.editIcon}
                                 onClick={isEditingNickname ? handleSaveClick : handleNicknameEditClick}/>
                        </div>
                        <div className={styles.userGender_div}>
                            <strong>性别:</strong>
                            <span className={styles.ProfileInfo_userGender}>
                                <div className={styles.genderOptions}>
                                    <label>
                                        <input type="radio" name="gender" value="男"
                                               checked={currentUser.gender === '男'}
                                               onChange={() => handleGenderChange('男')}/>男
                                    </label>
                                    <label>
                                        <input type="radio" name="gender" value="女"
                                               checked={currentUser.gender === '女'}
                                               onChange={() => handleGenderChange('女')}/>女
                                    </label>
                                </div>
                            </span>
                            {errorMessage.gender && <p style={{color: 'red'}}>{errorMessage.gender}</p>}
                        </div>
                        <div className={styles.userAge_div}>
                            <strong>年龄:</strong>
                            <span className={styles.ProfileInfo_userAge}>
                                {isEditingAge ? (
                                    <input type="number" value={age} onChange={handleAgeChange}
                                           className={styles.editInput}/>
                                ) : (
                                    <span style={{marginLeft: '5px'}}>{currentUser.age || '未知'}</span>
                                )}
                            </span>
                            <img src="http://localhost:8080/icon/edit_icon.png" alt="编辑" className={styles.editIcon}
                                 onClick={isEditingAge ? handleSaveAgeClick : handleAgeEditClick}/>
                        </div>
                        <div className={styles.userSignature_div}>
                            <strong>签名:</strong>
                            {/* 在签名显示和编辑输入之间切换 */}
                            <span className={styles.ProfileInfo_userSignature}>
                                {isEditingSignature ? (
                                    <textarea
                                        value={signature}
                                        onChange={handleSignatureChange}
                                        className={`${styles.signatureTextArea} ${styles.signatureEditInput}`}
                                        rows="3"
                                        placeholder="在此输入你的签名"
                                    />
                                ) : (
                                    <span>{signature || '无签名'}</span>
                                )}
                            </span>
                            <img
                                src="http://localhost:8080/icon/edit_icon.png"
                                alt="编辑"
                                className={styles.editIcon}
                                onClick={isEditingSignature ? handleSaveSignatureClick : handleSignatureEditClick}
                            />
                        </div>
                    </div>
                </div>) : (
                <div className={styles.accountSettingsContainer}>
                    {/* 新增大容器 */}
                    <div className={styles.settingsContainer}>
                        <div className={styles.settingRow}>
                            <div className={styles.settingContent}>
                                <div className={styles.settingTitle}>修改用户名</div>
                                <div className={styles.settingDescription}>您可以通过此选项更改您的用户名。</div>
                            </div>
                            <button className={styles.button} onClick={handleOpenUsernameModal}>修改</button>
                        </div>

                        <div className={styles.settingRow}>
                            <div className={styles.settingContent}>
                                <div className={styles.settingTitle}>修改密码</div>
                                <div className={styles.settingDescription}>设置复杂密码更能保护您的账号安全。</div>
                            </div>
                            <button className={styles.button} onClick={handleOpenPasswordModal}>修改密码</button>
                        </div>

                        <div className={styles.settingRow}>
                            <div className={styles.settingContent}>
                                <div className={styles.settingTitle}>修改绑定手机号</div>
                                <div className={styles.settingDescription}>确保您的手机号保持最新，以便接收重要通知。
                                </div>
                            </div>
                            <button className={styles.button} onClick={handleChangePhoneNumber}>修改</button>
                        </div>

                        <div className={styles.settingRow}>
                            <div className={styles.settingContent}>
                                <div className={styles.settingTitle}>注销账号</div>
                                <div className={styles.settingDescription}>如果您不再想使用此账号，可以选择注销。</div>
                            </div>
                            <button className={styles.button} onClick={handleLogout}>注销</button>
                        </div>
                    </div>
                </div>
            )}

            {isEditingUsername && (
                <div className={styles.modal}>
                    <div className={styles.modalContent}>
                        <h2>修改用户名</h2>
                        <p>当前用户名: {currentUser.userName}</p>
                        <label className={styles.modalRow}>
                            新用户名:
                            <input
                                type="text"
                                value={newUsername}
                                onChange={(e) => setNewUsername(e.target.value)}
                                placeholder="请输入新用户名"
                                className={styles.modalInput}
                            />
                        </label>
                        <div className={styles.error}></div>
                        <div className={styles.modalActions}>
                            <button onClick={handleSaveUsername} className={styles.modalOkButton}>确定</button>
                            <button onClick={handleCloseUsernameModal} className={styles.modalCancelButton}>取消</button>
                        </div>
                    </div>
                </div>
            )}

            {isEditingPassword && (
                <div className={styles.modal}>
                    <div className={styles.modalContent}>
                        <h2>修改密码</h2>
                        <label className={styles.modalRow}>
                            当前密码:
                            <input
                                type="password"
                                value={oldPassword}
                                onChange={(e) => setOldPassword(e.target.value)}
                                placeholder="请输入当前密码"
                                className={styles.modalInput}
                            />
                        </label>
                        <label className={styles.modalRow}>
                            新密码:
                            <input
                                type="password"
                                value={newPassword}
                                onChange={(e) => setNewPassword(e.target.value)}
                                placeholder="请输入新密码"
                                className={styles.modalInput}
                            />
                        </label>
                        <div className={styles.modalActions}>
                            <button onClick={handleSavePassword} className={styles.modalOkButton}>确定</button>
                            <button onClick={handleClosePasswordModal} className={styles.modalCancelButton}>取消</button>
                        </div>
                    </div>
                </div>
            )}

            {/* 手机号修改模态框 */}
            {isEditingPhoneNumber && (
                <div className={styles.modal}>
                    <div className={styles.modalContent}>
                        <h2>修改绑定手机号</h2>
                        <p>当前手机号: {currentUser.phone || '未绑定'}</p>
                        <label className={styles.modalRow}>
                            新手机号:
                            <input
                                type="tel"
                                value={newPhoneNumber}
                                onChange={(e) => setNewPhoneNumber(e.target.value)}
                                placeholder="请输入新手机号"
                                className={styles.modalInput}
                            />
                        </label>
                        <div className={styles.modalRow}>
                            验证码:
                            <div style={{ display: 'flex' ,width:'80%',marginLeft:'auto'}}>
                                <input
                                    type="text"
                                    value={verificationCode}
                                    onChange={(e) => setVerificationCode(e.target.value)}
                                    placeholder="请输入验证码"
                                    className={styles.modalInput_verificationCode} // 验证码输入框样式单独设置，比其他输入框短一些，以使得右边能容下验证码发送按钮
                                />
                                <button onClick={handleSendVerificationCode} className={styles.modalButton_sendVerificationCode}>获取验证码</button>
                            </div>
                        </div>
                        <div className={styles.modalActions}>
                            <button onClick={handleSavePhoneNumber} className={styles.modalOkButton}>确定</button>
                            <button onClick={handleClosePhoneNumberModal} className={styles.modalCancelButton}>取消</button>
                        </div>
                    </div>
                </div>
            )}

            {/* 注销模态框 */}
            {isLogoutModalVisible && (
                <div className={styles.modal}>
                    <div className={styles.modalContent}>
                        <h2>注销账户</h2>
                        <p>确认注销您的账户吗？</p>
                        <p>为了保护您的账户安全，请输入您的密码以确认注销。</p>
                        <label className={styles.modalRow}>
                            密码:
                            <input
                                type="password"
                                value={logoutPassword}
                                onChange={handleLogoutPasswordChange}
                                placeholder="请输入密码"
                                className={styles.modalInput}
                            />
                        </label>
                        <div className={styles.modalActions}>
                            <button onClick={handleConfirmLogout} className={styles.modalOkButton} style={{ backgroundColor: 'red', color: 'white' }}>注销</button>
                            <button onClick={handleCloseLogoutModal} className={styles.modalCancelButton}>取消</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default MainPage;